<template>
	<!-- 二维码支付 -->
	<view class="item-info" :class="openShow === 0 ? 'none' : openShow === 1 ? 'show' : ''">
		<view class="cate-content">
			<view class="item-fixed-top">
				<view class="title">{{title}}</view>
				<view class="close" @click="close">
					<image src="../../static/images/close.png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="b-txt b-txt-p-t">{{successTxt}}</view>
			<view class="pay-mon">{{money}}</view>
			<view class="b-txt b-txt-p-t-0 b-txt-p-b">{{payMoneyTxt}}</view>
			<view class="item-qr-box1">
				<view class="item-qr-box" id="qrBox">
					<ayQrcode ref="qrcode" qrcode_id="qrcode2" 
					:modal="modal_qr" 
					:url="url" 
					:height="wh" :width="wh"
					@hideQrcode="hideQrcode" 
					themeColor="#000"/>
				</view>
			</view>
			<!-- :height="wh" :width="wh" -->
			<view class="b-txt b-txt-p-b">{{scanTipTxt}}</view>
			<view class="btn-box">
				<view class="btn" @click="close">{{closeTxt}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import goPage from "@/js/GoPage.js";
	import staticConst from "../../js/const/StaticConst.js";
	import config from "../../js/conf/Config.js";
	import lang from "../../js/conf/Lang.js";
	import https from "../../js/https/Https.js";
	import localStore from "../../js/LocalStore.js";
	import ayQrcode from "../../components/comm/ay-qrcode/ay-qrcode.vue";
	export default {
		components:{ayQrcode},
		data() {
			return {
				title : lang.payWinTxt.title,
				openShow : 0,
				
				wh:200,
				modal_qr: false,
				// url: 'weixin://wxpay/bizpayurl?pr=nOQigTBzz', // 要生成的二维码值
				// money:2.33,
				url: '',
				money:0,
				successTxt: lang.payWinTxt.successTxt,//"下单成功"
				payMoneyTxt : lang.payWinTxt.payMoneyTxt,//支付金额
				scanTipTxt : lang.payWinTxt.scanTipTxt,//微信扫一扫支付
				closeTxt : lang.closeTxt,
			};
		},
		methods: {
			/***微信支付二维码数据*****/
			async creatQrcode(data)
			{
				let that = this;
				this.url = "";
				this.money = 0;
				let cp = await localStore.getCpInfo();
				let user = await localStore.getUserInfo();
				let param = {};
				console.log("creatQrcode()=====data:======:",data)
				param.timeline = Math.floor(new Date().getTime() / 1000); //当前时间戳，校验sign过期需要
				param.paytype = data.payType;
				param.objtype = data.objtype;
				param.objid = data.odid;
				param.money_pay = data.money_pay;
				param.cpid = cp.id;
				param.uid = user.uid;
				https.wxPayQrcode(param,back);
				function back(data)
				{
					if(!data)return;
					if(data.status == 1)
					{
						if(!data.data)return;
						data = data.data;
						if(data.pay_param && data.pay_param.code_url)
						{
							that.url = data.pay_param.code_url;
						}
						if(data.order_info && data.order_info.amount)
						{
							that.money = data.order_info.amount;
						}
						that.show("show");
					} else {
						goPage.goNavTo("/pages/projectOrder/index?tab=2");
					}
				}
			},
			
			/**显示分类面板 type:0付款记录，1：操作记录**/
			show(type) 
			{
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.openShow = 2;
				setTimeout(() => {
					this.openShow = state;
					if(state == 1)
					{
						this.showQrcode();
					}
				}, timer);
			},
			
			// 展示二维码
			showQrcode()
			{
				let that = this;
				this.modal_qr = true;
					uni.showLoading(
					{
						title:"加载中...",
						mask:true
					});
				setTimeout(function() {
					uni.hideLoading();
					that.$refs.qrcode.crtQrCode();
					// that.isShowQr = true;
				}, 500);
			},
			
			close()
			{
				goPage.goNavTo("/pages/projectOrder/index?tab=2");
				this.show();
			},
		},
	}
</script>
<style lang="scss">
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 99999999;
		transition: 0.3s;
		.mask-content {
			width: 100%;
			// max-height: 180;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: 0.3s;
			.item
			{
				border-bottom: 1px solid #ECECEC;
				padding: 10px 20px;
			}
			.active
			{
				color: #3388FF;
			}
		}
		&.none {
			display: none;
		}
		&.show {
			background: rgba(0, 0, 0, 0.4);
			.mask-content {
				transform: translateY(0);
			}
		}
	}
	.item-info {
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		background: #FFF;
		transition: 0.3s;
		overflow-y: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		.cate-content {
			border-radius: 6px;
			overflow: hidden;
			width: 400px;
			background: #F8F8F8;
			float: right;
			transform: translateY(-100%);
			transition: 0.3s;
			position: relative;
			.item-fixed-top
			{
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				border-bottom: 1px solid #ECECEC;
				.title
				{
					font-size: 18px;
				}
				.close
				{
					position: absolute;
					right: 5px;
					top: 12px;
					width: 32px;
					height: 32px;
					text-align: center;
					cursor: pointer;
					image
					{
						width: 14px;
						height: 14px;
					}
				}
			}
			
			.b-txt
			{
				color: #999;
				font-size: 16px;
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			
			.b-txt-p-t-0
			 {
				 padding-top : 0;
			 }
			
			.b-txt-p-t 
			{
				padding-top: 20px;
			}
			.b-txt-p-b
			 {
				 padding-bottom: 20px;
			 }
			
			.pay-mon
			{
				color: red;
				font-size: 28px;
				padding-top: 10px;
				height: 30px;
				width: 100%;
				font-weight: bold;
				line-height: 30px;
				text-align: center;
			}
			
			.item-qr-box1
			{
				position: relative;
				height: 200px;
				.item-qr-box
				{
					position:absolute;
					left:100px;
				}
			}
			
			.btn-box
			{
				width: 100%;
				height: 80px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 16px;
				padding-bottom: 30px;
				.btn
				{
					color: #aaa;
					height: 40px;
					width: 80px;
					text-align: center;
					line-height: 40px;
					cursor: pointer;
					border: 1px #aaa solid;
					border-radius: 6px;
					background-color: #fff;
				}
				
				.btn:hover
				{
					color: #666;
					border: 1px #999 solid;
					background-color: #F2F2F2;
				}
			}
		}
	
		&.none {
			display: none;
		}
		&.show {
			background: rgba(0, 0, 0, 0.3);
			.cate-content {
				transform: translateY(0);
			}
		}
	}
	
</style>